CSR, SSG, SSR, ISR辺りの概念を整理する
CSR
とは
Crient Side Rendering(クライアントサイド・レンダリング)
クライアントサイド レンダリング(CSR)は JavaScriptを使用し、直接ブラウザでページをレンダリングすることを意味します。すべてのロジック、データフェッチ、テンプレーティングやルーティングは、サーバーではなくクライアント上で扱われる
特徴
課題
大きいアプリケーションの場合、クライアントで処理するJavascriptの量も増えてしまう
そのため、ユーザーにページを表示させるのが遅くなってしまう。(ユーザーのデバイススペックに依存してしまう)
適しているユースケース
SEOが関係ないページ(SPAはSEOに弱いため)
ユーザーによって内容が変わるページ
ユーザーダッシュボードなど
SSG
とは
= Static Site Generation(静的サイト・ジェネレーション)
特徴
CSR(クライアントサイドレンダリング)のようにロジックやデータフェッチをブラウザで行うのではなく、サーバー側で処理(データフェッチ等を)し、HTMLを構築してクライアント側に返す
この方法ではCSR(クライアントサイドレンダリング)のようにクライアント(ユーザーデバイス)のスペックに依存せず、ハイスペックなサーバーでHTMLを構築することができる
課題
結局これも、(サーバー側で)ユーザーのリクエストを受けてからHTMLを構築するので、時間がかかってしまう
適しているユースケース
SSR
とは
= Server Side Rendering(サーバーサイド・レンダリング)
特徴
ビルド時に外部APIからのデータフェッチ・HTMLの構築を行うことで、ユーザー側のリクエスト時にサーバー側への問い合わせを不要にする
また、静的サイトをCDNにキャッシュしておくことにより、ユーザーに対して高速にページを表示することができる
課題
1. ビルド時に大量のデータを取ってくることは現実的ではない
→フォールバックが解決
2. ビルド時しかデータフェッチしないため、リソースの更新が頻繁な場合は、更新が間に合わない
→ISRが解決
適しているユースケース
SSR_フォールバック
とは
getStaticPaths内に記述
falseの場合、404に飛ばされる
trueの場合、①データフェッチしていない状態のHTMLが返され、②その後ブラウザ側でデータフェッチが行われて、HTMLが再構築される
課題
非完全な状態のHTML(データが含まれていない)でクライアントに送られてしまう
→blockingが解決
SSR_blocking
とは
fallbackのオプションの一つ
データフェッチが行われてからHTMLが構築され、クライアント側にHTMLが送られる
ISR
とは
Incremental Static Regeneration(インクリメンタル・静的・再生成)
getStaticProps内に記述
設定した秒数(revalidate: 10のように記述する)経過以降に、ユーザーからリクエストが来た場合に、サーバー側でデータフェッチを再度行う
ポイントになってくるのが、リクエストしたユーザーにはキャッシュしていたHTMLを返すということ
特徴
メリット
デメリット
課題
適しているユースケース